@import '../../assets/fonts/fonts.scss';

.traffic-situation {
  width: 500px;
  // height: 400px;
  position: relative;
  // background: linear-gradient(135deg, rgba(0, 24, 48, 0.8) 0%, rgba(0, 48, 96, 0.6) 100%);
  border-radius: 12px;
  overflow: hidden;
  padding: 10px;
  
  .traffic-situation-content {
    // margin-top: 20px;
    
    .congestion-levels-container {
      display: flex;
      flex-direction: column;
      // gap: 20px;
      
      .congestion-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        &.first-row {
          // 第一行：3个组件平均分布
          .hzdz-congestion-level {
            flex: 1;
            // margin: 0 10px;
            
            &:first-child {
              margin-left: 0;
            }
            
            &:last-child {
              margin-right: 0;
            }
          }
        }
        
        &.second-row {
          // 第二行：2个组件平均分布
          justify-content: center;
          gap: 40px;
          
          .hzdz-congestion-level {
            flex: 0 0 auto;
          }
        }
      }
    }
  }

  // 响应式适配 - 基准分辨率为3952x1248
  // 默认情况下应用响应式适配
  @media screen and (max-width: 1920px) {
    transform: scale(0.4862);
    transform-origin: top left;
    margin-top: -230px;
  }
  @media screen and (max-width: 1080px) {
    transform: scale(0.2733);
    transform-origin: top left;
  }
  @media screen and (min-width: 5120px) {
    transform: scale(1.2955);
    transform-origin: top left;
  }
  
} 